<template>
  <view>
    <!-- 筛选 -->
    <!-- 三个入口：首页分类；分类三级分类；搜索结果跳转 -->
    <view class="filter">
      <text class="active">综合</text>
      <text>销量</text>
      <text>价格</text>
    </view>
    <!-- 商品列表 -->
    <scroll-view @scrolltolower="getMore" class="goods" scroll-y>
      <view class="item"
      @click="goDetail(item.goods_id)"
      v-for="item in list"
      :key="item.goods_id">
        <!-- 商品图片 -->
        <image class="pic" :src="item.goods_small_logo" />
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">{{item.goods_name}}</view>
          <view class="price">
            <text>￥</text>{{item.goods_price}}
            <text>.00</text>
          </view>
        </view>
      </view>
      <!-- 没有更多数据的提示 -->
      <view v-if="hasData" class="nodata">没有更多数据了</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    // 只存储渲染相关的数据，分页可以不用放在data里
    return {
      // 商品列表
      list: []
    }
  },
  computed: {
    // 判断有无更多数据
    hasData() {
      return this.list.length === this.total;
    }
  },
  onLoad(query) {
    // 获取页面的query参数
    console.log(query);
    // 把查询参数存储到实例this上
    this.query = query;
    // 默认获取第一页数据
    this.query.pagenum = 1;
    // 设置默认每页返回5条数据
    this.query.pagesize = 5;
    // 调用接口获取商品列表
    this.getPrdList(this.query);
    
  },
  // onReachBottom() {
  //   // 页面滚动才会触发的滚动事件，区域滚动不会触发
  //   console.log('钩子：页面到底部了。。。');
  // },
  methods: {
    goDetail(id) {
      uni.navigateTo({
        url: `/packone/goods/index?id=${id}`
      });
    },
    // 根据关键词获取商品列表数据
    async getPrdList(data) {
      // data变量名重复，起别名
      const {msg:{status},data:_data} = await this.request({
        url: '/api/public/v1/goods/search',
        data
      });
      console.log(_data);
      if (status === 200) {
        // 增量,扩展运算符
        this.list.push(..._data.goods);
        // 数据总和
        this.total = _data.total;
      }
    },
    // 页面触底事件，上拉加载
    // 区域滚动
    getMore() {
      console.log('scrolltolower事件：页面到底部了。。。');
      // 获取下一页的数据
      // 1.判断数据是否加载完成
      // 2.每次触底，页码加1
      if (this.hasData){
        return false
      }
      this.query.pagenum++;
      this.getPrdList(this.query);
    }
  }
};
</script>

<style scoped lang="scss">
.nodata {
  margin: 32rpx;
  color: #666;
  font-size: 24rpx;
  text-align: center;
}
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
